<template>
    <div>
        <h1>with http-request instead of action</h1>
        <el-upload class="upload-demo" drag action="" :http-request="uploadFile" multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
            </template>
        </el-upload>
        <form action="http://localhost:9090/api/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="file" id="">
            <input type="submit" value="submit">
        </form>
        <img src="https://agiantii-oss-local.oss-cn-hangzhou.aliyuncs.com/temp/Snipaste_2024-10-28_15-20-22.png" alt="">
        <h1>without action </h1>
        <el-upload class="upload-demo" drag action="http://localhost:9090/api/upload" multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
            </template>
        </el-upload>
    </div>
</template>

<script setup>
import service from '@/util/service';
import { UploadFilled } from '@element-plus/icons-vue'
const uploadFile = (param) =>{
    const formData = new FormData()
    formData.append('file', param.file)
    service.post('/api/upload',formData).then(res => {
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    })
}
</script>

<style lang="css" scoped>

</style>